<template>
  <div id="login">
    <div class="login_header">
      <h3 class="title">华医仕销售后台管理系统</h3>
    </div>

    <div class="login_content">
      <h3>欢迎登录</h3>
      <el-form
        ref="loginForm"
        :model="loginForm"
        status-icon
        :rules="rules"
        class="demo-loginForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            autocomplete="off"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item prop="otp" class="kaptcha">
          <el-input
            v-model="loginForm.otp"
            type="text"
            autocomplete="off"
            placeholder="请输入验证码"
            prefix-icon="el-icon-coordinate"
          />
          <!-- <div class="kaptcha_img">
            <img
              :src="image"
              title="看不清? 换一张"
              alt="验证码加载失败"
              @click="handleOpt"
            />
          </div> -->
        <validCodes @myclick='parenclick'></validCodes>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            @click="submitForm(loginForm)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {apiDengluUser} from "../../api/user"
import validCodes from '../../components/loginCode/VerificationCode'
export default {
  name: "Login",
  components:{
    validCodes
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        otp: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: "用户名必须是英文、数字或下划线组成",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: "密码必须是英文、数字或下划线组成",
            trigger: "blur",
          },
          { min: 5, message: "长度至少6位", trigger: "blur" },
        ],
        otp: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      loading: false,
      image: "",
      // 验证码
      valadCode:''
    };
  },
  mounted() {
    this.accountTip();
  
  },
  
  methods: {
    //获取图形验证码
    parenclick(parmas){          
    console.log('父组件执行了',parmas);
    this.valadCode=parmas
   },
 
    submitForm(loginForm) {
      // 登录提交
        console.log(loginForm);
          if (!loginForm.username || !loginForm.password) {
       this.$message({ message: '请输入用户名和密码', type: 'info' ,duration:1000 });
        return;
      }
      if (loginForm.password.length < 6) {
          this.$message({ message: '密码格式错误', type: 'info' ,duration:1000 });
        return;
      }
      if (!loginForm.otp) {
          this.$message({ message: '请输入验证码', type: 'info' ,duration:1000 });
        return;
      }
      if(loginForm.otp==this.valadCode){
           apiDengluUser({
         username: loginForm.username,
         password: loginForm.password,
      }).then((res) => {
            console.log(res);
            // this.$router.push({ path: '/provincialsales' });
            this.$message({ message: '登录成功', type: 'success' ,duration:1000 });
            localStorage.userInfo=JSON.stringify(res.reslut)
            this.$store.commit("addToken", res.token);
            setTimeout(()=>{
              this.$router.push({path: '/provincialsales'})

            },1000)
      });
      }else{
          this.$message({ message: '验证码输入格式错误', type: 'info' ,duration:1000 });
      }


    },
      accountTip() {
      this.$notify({
        title: '管理员账号：admin01',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left'
      })
      this.$notify({
        title: '商户账号：admim02',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left',
        offset: 80
      })
    },
  },

};
</script>

<style lang="less" scoped>

    #login {
  width: 100%;
  height:100%;
  font-family: "Microsoft YaHei light", "微软雅黑", Arial, Tahoma, simhei,
  Helvetica, sans-serif;
  background: url("~@/assets/login_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login_header {
    height: 80px;
    background-color: hsla(0, 0%, 100%, 0.2);
    text-align: center;
    line-height: 80px;
    .title {
      letter-spacing: 1px;
      font-size: 32px;
      margin: 0;
      margin-left: 20px;
      font-weight: bold;
      color: rgba(255, 255, 253, 1);
    }
  }
  .login_content {
    width: 400px;
    background-color: hsla(0, 0%, 100%, 1);
    padding: 20px 40px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    h3 {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .el-button {
      display: block;
      width: 100%;
      height: 40px;
      background: #6e90f7;
      border-radius: 4px;
      margin: 0 auto;
    }
    .el-button:hover {
      background: #3a68f3;
    }
    .kaptcha > .el-form-item__content {
      // display: flex;
      justify-content: space-between;
      align-items: center;
      .el-input {
        width: 180px;
      }
      .kaptcha_img {
        display: block;
        width: 120px;
        height: 40px;
        float: right;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
  }
  
}


</style>